// 引入echarts.js
import * as echarts from '../../ec-canvas/echarts';

let chart = null;

Page({
    data: {
        ec: {
            onInit: initChart
        }
    }
})

// 初始化图表函数
function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
    })

    canvas.setChart(chart)

    // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴
    let option = {
        // 修改字体大小
        textStyle: {
            fontSize: 10,
            color: '#ffffff'
        },
        // 修改图表颜色
        color: ['#85c6e8', '#e7bf96', '#43d777'],
        // 修改图表图例组件
        legend: {
            data: ['温度', '湿度'],
            top: 10,
            left: 'center',
            backgroundColor: 'rgba(164,53,53,0)',
            z: 100
        },

        xAxis: {
            type: 'category',
            boundaryGap: true,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        series: [
            {
                name: '温度',
                type: 'line',
                data: [40, 35, 22, 27, 38, 32, 22],
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                },
                markLine: {
                    data: [{ type: 'average', name: 'Avg' }]
                }
            },
            {
                name: '湿度',
                type: 'line',
                data: [70, 65, 67, 82, 73, 75, 77],
                markPoint: {
                    data: [{ name: '周最低', value: -10, xAxis: 0.2, yAxis: -1.5 }]
                },
                markLine: {
                    data: [
                        { type: 'average', name: 'Avg' },
                        [
                            {
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            },
                            {
                                symbol: 'circle',
                                label: {
                                    position: 'start',
                                    formatter: 'Max'
                                },
                                type: 'max',
                                name: '最高点'
                            }
                        ]
                    ]
                }
            }
        ]
    };


    chart.setOption(option);
    return chart;
}
